<template>
  <div class="home-box">
    <el-carousel class="model1" :interval="5000" arrow="always" height="836px">
      <el-carousel-item
        v-for="(item, index) in header"
        :key="index"
        class="sywz"
      >
        <img class="imdt" :src="item.url" />
        <p class="medium1">{{ item.name }}</p>
        <p class="medium2">{{ item.con }}</p>
      </el-carousel-item>
    </el-carousel>

    <section class="model2">
      <div class="blur"></div>
      <div class="m2-content">
        <div class="m-title">图文攻略</div>
        <div class="m2-box">
          <div class="left">
            <div class="m2-img-box">
              <img :src="twglData1.first_pic" alt="" />
            </div>
            <div class="m2-cont-box">
              <p class="title">{{ twglData1.title }}</p>
              <p class="content">
                {{ twglData1.note }}
              </p>
              <el-button
                class="more-btn"
                type="primary"
                size="default"
                @click="toDetail(twglData1)"
                >了解更多</el-button
              >
            </div>
          </div>
          <div class="right">
            <div
              class="right-item"
              :style="{
                background: `url(${twglData2.first_pic}) no-repeat`,
                backgroundSize: '100% 100%',
              }"
            >
              >
              <div class="rtc-box">
                <p class="title">{{ twglData2.title }}</p>
                <p class="tips">徐闻必打卡景点榜</p>
                <el-button
                  class="more-btn3"
                  type="primary"
                  size="default"
                  @click="toDetail(twglData2)"
                  >了解更多</el-button
                >
              </div>
            </div>

            <div
              class="right-item"
              style="margin-top: 88px"
              :style="{
                background: `url(${twglData3.first_pic}) no-repeat`,
                backgroundSize: '100% 100%',
              }"
            >
              <div class="rtc-box">
                <p class="title">{{ twglData3.title }}</p>
                <p class="tips">徐闻必打卡景点榜</p>
                <el-button
                  class="more-btn3"
                  type="primary"
                  size="default"
                  @click="toDetail(twglData3)"
                  >了解更多</el-button
                >
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <section class="model3">
      <div class="blur"></div>
      <div class="m3-content">
        <div class="m-title">著名景点</div>

        <div class="m3-box">
          <div class="m3-col">
            <div
              class="m3-item"
              v-for="item in attractArr1"
              :key="item.id"
              :style="{
                background: `url(${item.headpic}) no-repeat`,
                backgroundSize: '100% 100%',
              }"
              @click="jdxq(item)"
            >
              <div class="m3-jdtitle">
                <span>{{ item.name }}</span>
              </div>
            </div>
          </div>
          <div class="m3-col">
            <div
              class="m3-item2"
              v-for="item in attractArr2"
              :key="item.id"
              :style="{
                background: `url(${item.headpic}) no-repeat`,
                backgroundSize: '100% 100%',
              }"
              @click="jdxq(item)"
            >
              <div class="m3-jdtitle">
                <span>{{ item.name }}</span>
              </div>
            </div>
          </div>
          <div class="m3-col">
            <div
              class="m3-item"
              v-for="item in attractArr3"
              :key="item.id"
              :style="{
                background: `url(${item.headpic}) no-repeat`,
                backgroundSize: '100% 100%',
              }"
              @click="jdxq(item)"
            >
              <div class="m3-jdtitle">
                <span>{{ item.name }}</span>
              </div>
            </div>
            <!-- <div class="m3-item">
              <div class="m3-jdtitle">南极村</div>
            </div> -->
          </div>
        </div>
      </div>
    </section>

    <section class="model4">
      <div class="blur"></div>
      <div class="m4-content">
        <div class="m-title">景点住宿</div>
        <div class="m4-box" v-for="(item, index) in holetlis" :key="index">
          <div class="m4-img">
            <img :src="item.thumb" alt="" style="width: 100%; height: 100%" />
          </div>
          <div class="m4-info">
            <p class="name">{{ item.title }}</p>
            <div style="margin-top: 10px">
              <el-rate v-model="item.score" disabled></el-rate>
            </div>
            <p class="desc">{{ item.note }}</p>
            <p class="phone">电话: {{ item.contact }}</p>
            <p class="address">地址: {{ item.address }}</p>
            <div class="jdjg-box">
              <span class="rmb">{{
                item.price ? "¥" + item.price : "暂无价格"
              }}</span>
              <el-button
                class="more-btn2"
                type="primary"
                size="default"
                @click="linkTo(item)"
                >了解更多</el-button
              >
            </div>
          </div>
        </div>
      </div>
    </section>
  </div>
</template>
<script>
import { service } from "@/request";
export default {
  data() {
    return {
      header: [],
      attractlis: [],
      attractArr1: [],
      attractArr2: [],
      attractArr3: [],
      stralis: [],
      videot: [{ url: "" }],
      holetlis: [],
      rateValue: 5,
    };
  },
  computed: {
    twglData1() {
      if (this.stralis && this.stralis.length > 0) {
        return this.stralis[0];
      }
      return {};
    },
    twglData2() {
      if (this.stralis && this.stralis.length > 1) {
        return this.stralis[1];
      }
      return {};
    },
    twglData3() {
      if (this.stralis && this.stralis.length > 2) {
        return this.stralis[2];
      }
      return {};
    },
  },
  created() {},
  mounted() {
    this.Carousel();
    this.Attractlist();
    this.Strategylist();
    this.Videolist();
    this.Holete();
  },
  methods: {
    linkTo(item) {
      // console.log("item",item)
      window.open(item.href);
    },
    toDetail(item) {
      this.$router.push({
        path: "/lqxx",
        query: {
          id: item.id,
          origin: "strategy",
        },
      });
    },
    // 景点详情
    jdxq(item) {
      this.$router.push({
        path: "/jdxq",
        query: {
          id: item.id,
        },
      });
    },
    // 标志景点
    Attractlist() {
      service({
        url: "/api/attractlist",
        method: "post",
        data: { recommed: 1 },
      }).then((res) => {
        if (res.code == 200) {
          // console.log("res",res.data)
          this.attractlis = res.data.data || [];

          this.attractArr1 =
            this.attractlis.length > 1 ? this.attractlis.slice(0, 2) : [];

          this.attractArr2 =
            this.attractlis.length > 4 ? this.attractlis.slice(2, 5) : [];

          this.attractArr3 =
            this.attractlis.length > 5 ? this.attractlis.slice(5, 7) : [];
        }
      });
    },
    // 轮播图
    Carousel() {
      service({
        url: "/api/carousel",
        method: "post",
        data: {},
      }).then((res) => {
        if (res.code === 200) {
          // console.log("header",res.data)
          this.header = res.data;
        }
      });
    },

    // 攻略
    Strategylist() {
      service({
        url: "/api/strategylist",
        method: "post",
        data: {},
      }).then((res) => {
        if (res.code == 200) {
          this.stralis = res.data.data;
        }
      });
    },

    // 视频
    Videolist() {
      service({
        url: "/api/attractvedio",
        method: "post",
        data: {},
      }).then((res) => {
        if (res.code == 200) {
          this.videot = res.data;
        }
      });
    },

    // 酒店
    Holete() {
      service({
        url: "/api/hotlelist",
        method: "post",
        data: {},
      }).then((res) => {
        if (res.code == 200) {
          this.holetlis = res.data.data || [];
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.home-box {
  .model1 {
    width: 100%;

    .imdt {
      width: 100%;
    }
  }

  .model2 {
    width: 100%;
    height: 1100px;
    background: url("../assets/image/bg1.jpg") no-repeat;
    background-size: 100% 100%;
    position: relative;

    .blur {
      position: absolute;
      left: 0;
      right: 0;
      z-index: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.5);
      backdrop-filter: blur(20px);
    }

    .m2-content {
      position: relative;
      width: 1500px;
      margin: 0 auto;

      .m2-box {
        height: 865px;
        display: flex;
        justify-content: space-between;
        .left {
          flex: 1;
          min-width: 0;
          background: #191b2a;
          height: 100%;
          padding: 60px 50px 35px 50px;
          display: flex;
          justify-content: space-between;

          .m2-img-box {
            width: 420px;
            height: 100%;
            img {
              width: 100%;
              height: 100%;
            }
          }
          .m2-cont-box {
            margin-left: 85px;
            flex: 1;
            min-width: 0;
            .title {
              padding: 50px 0;
              font-size: 30px;
              color: #fff;
            }
            .content {
              color: #fff;
              font-size: 18px;
              line-height: 28px;
              letter-spacing: 2px;
              margin-bottom: 50px;
            }
          }
        }

        .right {
          margin-left: 25px;
          width: 440px;
          height: 100%;
          background: #191b2a;
          padding: 30px 50px 30px 50px;

          .right-item {
            width: 348px;
            height: 348px;
            background: url("../assets/image/m32.png") no-repeat;
            background-size: 100% 100%;
            position: relative;

            .rtc-box {
              background: #191b2a;
              width: 220px;
              height: 150px;
              position: absolute;
              bottom: -25px;
              left: calc(50% - 110px);
              .title {
                padding-top: 30px;
                font-size: 20px;
                font-weight: bold;
                text-align: center;
                color: #fff;
              }
              .tips {
                color: #fff;
                text-align: center;
                font-size: 18px;
                padding: 20px 0 20px 0;
              }
            }
          }
        }
      }
    }
  }

  .model3 {
    width: 100%;
    height: 1280px;
    background: url("../assets/image/bg2.jpg") no-repeat;
    background-size: 100% 100%;
    position: relative;

    .blur {
      position: absolute;
      left: 0;
      right: 0;
      z-index: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.5);
      backdrop-filter: blur(20px);
    }

    .m3-content {
      position: relative;
      width: 1216px;
      height: 100%;
      margin: 0 auto;

      .m3-box {
        height: 1045px;
        display: flex;
        justify-content: space-between;

        .m3-col {
          width: calc((100% - 32px) / 3);
        }

        .m3-item {
          width: 100%;
          height: calc((100% - 20px) / 2);
          background: url("../assets/image/m32.png") no-repeat;
          background-size: 100% 100%;
          display: flex;
          align-items: center;
          justify-content: center;
        }
        .m3-item:not(:first-of-type) {
          margin-top: 20px;
        }

        .m3-jdtitle {
          background: rgba(0, 0, 0, 0.5);
          width: 170px;
          height: 170px;
          border-radius: 85px;
          color: #fff;
          /* line-height: 170px; */
          text-align: center;
          font-size: 22px;
          letter-spacing: 5px;
          position: relative;
          padding: 0 10px;
          display: flex;
          align-items: center;
          justify-content: center;
        }
        .m3-jdtitle::after {
          content: "";
          position: absolute;
          bottom: 50px;
          left: calc(50% - 55px);
          height: 2px;
          background: #fff;
          width: 110px;
        }

        .m3-item2 {
          width: 100%;
          height: calc((100% - 40px) / 3);
          background: url("../assets/image/m32.png") no-repeat;
          background-size: 100% 100%;
          display: flex;
          align-items: center;
          justify-content: center;
        }
        .m3-item2:not(:first-of-type) {
          margin-top: 20px;
        }
      }
    }
  }

  .model4 {
    width: 100%;
    min-height: 670px;
    background: url("../assets/image/bg3.jpg") no-repeat;
    background-size: 100% 100%;
    padding-bottom: 20px;
    position: relative;

    .blur {
      position: absolute;
      left: 0;
      right: 0;
      z-index: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.5);
      backdrop-filter: blur(20px);
    }

    .m4-content {
      position: relative;
      width: 1216px;
      height: 100%;
      margin: 0 auto;

      .m4-box {
        width: 100%;
        height: 400px;
        background: #fff;
        display: flex;
        justify-content: space-between;

        .m4-img {
          width: 520px;
          height: 100%;
        }
        .m4-info {
          padding: 40px;
          flex: 1;
          min-width: 0;

          .name {
            font-size: 30px;
          }
          .desc {
            margin-top: 16px;
            font-size: 22px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
          }
          .phone {
            margin-top: 40px;
            color: #808080;
            font-size: 16px;
          }
          .address {
            margin-top: 10px;
            color: #808080;
            font-size: 16px;
          }
          .rmb {
            font-size: 40px;
            color: #e00043;
            font-style: italic;
          }
          .jdjg-box {
            margin-top: 60px;
            display: flex;
            justify-content: space-between;
            align-items: center;

            .more-btn2 {
              background: #cd2e4a;
              border: none;
              border-radius: 0;
              width: 235px;
              height: 55px;
              font-size: 20px;
            }
          }
        }
      }

      .m4-box:not(:first-of-type) {
        margin-top: 20px;
      }
    }
  }
}

.m-title {
  padding: 80px 0 50px 0;
  font-size: 40px;
  color: #fff;
  text-align: center;
}

.more-btn {
  background: #cd2e4a;
  border: none;
  border-radius: 0;
  width: 100%;
  height: 60px;
  font-size: 22px;
}

.more-btn3 {
  background: #cd2e4a;
  border: none;
  border-radius: 0;
  width: 100%;
  height: 30px;
  font-size: 16px;
  line-height: 30px;
  padding: 0 20px;
}

::v-deep .el-rate__icon {
  font-size: 30px;
}
</style>
